<html>
    <head>
	<title>PDF.js</title>
	<meta charset="utf-8"/>
	<style type="text/css">
		button,input,span,a {
			font-size:36px;
		}
	</style>
    </head>
    <body>
    <div style="width:100%;text-align:center;">
        <button id="prev">Prev</button>&nbsp;<button id="next">Next</button>
		<input id="page_num" style="width:69px"> / <span id="page_count" style="background-color:white">&nbsp;</span>
		<a target="_blank" id="link">Link</a>
    </div>
    <canvas id="the-canvas" style="width:100%"></canvas>
    <script src="./pdf.js"></script>
    <script>
        var url = (!location.hash||location.hash.length==1) ? "booklet.pdf" : location.hash.substring(1);
     	document.getElementById("link").href=url;
        var pdfDoc = null,
            pageNum = 1,
            pageRendering = false,
            pageNumPending = null,
            scale = 0.9, //小于1表示占屏幕宽度比例，加载首页时会计算放大比例
            canvas = document.getElementById('the-canvas'),
            ctx = canvas.getContext('2d');
    
        /**
         * Get page info from document, resize canvas accordingly, and render page.
         * @param num Page number.
         */
        function renderPage(num) {
            pageRendering = true;
            // Using promise to fetch the page
            pdfDoc.getPage(num).then(function (page) {
		if(scale < 1) {
			var temp = page.getViewport(1.0);
			scale = window.innerWidth * scale / temp.width;
		}
                var viewport = page.getViewport(scale);
                canvas.height = viewport.height;
                canvas.width = viewport.width;
    
                // Render PDF page into canvas context
                var renderContext = {
                    canvasContext: ctx,
                    viewport: viewport
                };
                var renderTask = page.render(renderContext);
    
                // Wait for rendering to finish
                renderTask.promise.then(function () {
                    pageRendering = false;
                    if (pageNumPending !== null) {
                        // New page rendering is pending
                        renderPage(pageNumPending);
                        pageNumPending = null;
                    }
                });
            });
    
            // Update page counters
            document.getElementById('page_num').value = num;
        }
    
        /**
         * If another page rendering in progress, waits until the rendering is
         * finised. Otherwise, executes rendering immediately.
         */
        function queueRenderPage(num) {
            if (pageRendering) {
                pageNumPending = num;
            } else {
                renderPage(num);
            }
        }
    
        /**
         * Displays previous page.
         */
        function onPrevPage() {
            if (pageNum <= 1) {
                return;
            }
            pageNum--;
            queueRenderPage(pageNum);
        }
    
        document.getElementById('prev').addEventListener('click', onPrevPage);
    
        /**
         * Displays next page.
         */
        function onNextPage() {
            if (pageNum >= pdfDoc.numPages) {
                return;
            }
            pageNum++;
            queueRenderPage(pageNum);
        }
    
        document.getElementById('next').addEventListener('click', onNextPage);
        
	document.getElementById('page_num').addEventListener('keypress', function(event){
	    if(event.keyCode==13){
		var page_num = parseInt(this.value);
		if(!!page_num && page_num>=1 && page_num<=document.getElementById('page_count').textContent){
		pageNum=parseInt(page_num);
		queueRenderPage(pageNum);
		}
	    }
	});
    
        /**
         * Asynchronously downloads PDF.
         */
        PDFJS.getDocument({url:url,rangeChunkSize:65536*4,disableAutoFetch:0}).then(function(pdfDoc_) {
            pdfDoc = pdfDoc_;
            document.getElementById('page_count').textContent = pdfDoc.numPages;
    
            // Initial/first page rendering
            renderPage(pageNum);
        });
        
        document.onkeydown = function(event){
            var e = event || window.event || arguments.callee.caller.arguments[0];
            if(!e) return;
            if(e.keyCode==37){ //左
            	onPrevPage();
            }
            if(e.keyCode==39){ //右
            	onNextPage();
            }
        }; 
    </script>
    </body>
</html>